<template>
  <div class="finance-scene gateway-common">
    <div class="gateway-common-banner">
      <h4 class="gateway-common-banner-title">功能组件</h4>
      <p class="gateway-common-banner-desc">
        近年来，随着大数据、云计算、区块链、人工智能等新技术的快速发展，这些新技术与金融业务深度融合，释放出了金融创新活力和应用潜能，这大大推动了我国金融业转型升级，助力金融更好地服务实体经济，有效促进了金融业整体发展。在这一发展过程中，又以大数据技术发展最为成熟、应用最为广泛。
      </p>
    </div>
    <div class="finance-scene-content">
      <!-- 产品分类 -->
      <div class="finance-scene-content-product">
        <p class="finance-scene-content-title">产品分类</p>
        <ul class="finance-scene-product-list">
          <li>
            <div class="finance-scene-product-img"><img src="~@/assets/img/chengshi3.jpg" alt=""></div>
            <div class="finance-scene-product-bottom">
              <p class="finance-scene-product-subtitle">大中小微划型</p>
              <p class="finance-scene-product-desc">
                基于元素征信天量数据，依据国家统计局《统计大中小微型企业划分办法(2017)》文件，从营业收入、资产总额、从业人员三方面，对各行业企业进行划分，分为：大型、中型、小型、微型四种类型。另以国家市场监督管理总局发布的小微企业名录作为补充，完善企业分型。
              </p>
            </div>
          </li>
          <li>
            <div class="finance-scene-product-img"><img src="~@/assets/img/chengshi6.jpg" alt=""></div>
            <div class="finance-scene-product-bottom">
              <p class="finance-scene-product-subtitle">企业画像</p>
              <p class="finance-scene-product-desc">
                针对借贷申请环节，基于元素丰富的业务经验及底层多元的变量指标，为信贷机构提供的完备风控服务，有效识别团伙欺诈、羊毛党等高风险骗贷现象，帮助信贷机构降低风险、减少资金损失。
              </p>
            </div>
          </li>
        </ul>
      </div>
      <!--客户案例 -->
      <div class="finance-scene-content-customer">
        <p class="finance-scene-content-title">客户案例</p>
        <img class="finance-scene-content-banner" src="~@/assets/img/chengshi1.jpg" alt="">
        <div class="finance-scene-content-desc"></div>
        <div class="finance-scene-content-desc1">
          <p>某银行推出的支持小微企业融资的产品，面向有两年以上纳税记录的小微企业，进行信用贷款发放，帮助小微企业解决经营资金需求。</p>
          <p>
            在互联网平台实现逾1亿多次投放曝光，精准覆盖十余省市目标企业数百万家，获得数十万的优质目标客户，帮助转化意向客户逾5万家，转化贷款数千万，ROI超出客户预期，取得良好的投放效果，目前投放在稳步推进。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FinanceScene',
  // components: { GatewayFooter, RightSide },
  data() {
    return {}
  },
  created() {
    this.$store.dispatch('app/setGatewayActivedIndex', '0-1-3')
  },
  methods: {}
}
</script>

<style scoped lang="scss">

.gateway-common {
  .gateway-common-banner {
    height: 560px;
    min-width: 1200px;
    background: url('~@/assets/img/nav_img1.jpg') no-repeat center;
    text-align: center;
    margin: -52px auto 0 auto;
    overflow: hidden;
    .gateway-common-banner-title {
      font-size: 80px;
      font-weight: 500;
      color: black;
      margin-top: 120px;
    }
    .gateway-common-banner-desc {
      width: 1200px;
      font-size: 22px;
      font-weight: 400;
      color: black;
      line-height: 30px;
      margin: 10px auto 0 auto;
    }
  }
  .gateway-common-content {
    padding: 60px 0 0 0;
    .gateway-common-content-desc {
      margin: 0 auto;
      width: 898px;
      font-size: 30px;
      font-weight: 500;
      color: #333333;
      line-height: 45px;
      text-align: center;
    }
  }
}
.finance-scene {
  min-width: 1440px;
  .finance-scene-content {
    .finance-scene-content-title {
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      color: #333333;
      padding-bottom: 10px;
      &::after {
        content: '';
        display: block;
        position: relative;
        width: 64px;
        height: 3px;
        background: #2b99ff;
        left: 50%;
        bottom: -10px;
        transform: translate(-50%, 0%);
      }
    }
    // 产品分类
    .finance-scene-content-product {
      background: #fff;
      padding: 80px 0 0 0;
      .finance-scene-product-list {
        width: 1200px;
        margin: 86px auto 0 auto;
        padding-bottom: 140px;
        display: flex;
        justify-content: space-between;
        li {
          width: 580px;
          height: 540px;
          background: #fff;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
          border-radius: 3px;
          transition: 0.3s;
          overflow: hidden;
          .finance-scene-product-img {
            height: 325px;
            width: 590px;
            img {
              width: 100%;
              height: 100%;
            }
          }

          .finance-scene-product-bottom {
            padding: 0 29px;
            box-sizing: border-box;
            .finance-scene-product-subtitle {
              line-height: 20px;
              margin: 27px 0 17px 0;
              text-align: center;
              font-size: 20px;
              color: #666666;
              transition: 0.3s;
            }
            .finance-scene-product-desc {
              font-size: 16px;
              color: #999999;
              transition: 0.3s;
              line-height: 25px;
            }
          }
          &:hover {
            border-bottom: 10px solid #2b99ff;
            box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
            .finance-scene-product-subtitle {
              color: #2b99ff;
            }
            .finance-scene-product-desc {
              color: #666666;
            }
          }
        }
      }
    }
    // 客户案例
    .finance-scene-content-customer {
      padding: 100px 0px 120px 0px;
      background: #f3f3f3;
      position: relative;
      .finance-scene-content-banner {
        width: 1200px;
        height: 500px;
        display: block;
        margin: 81px auto 0 auto;
        position: relative;
      }
      .finance-scene-content-desc {
        position: absolute;
        bottom: 126px;
        left: 0px;
        right: 0px;
        width: 1100px;
        margin: 0px auto;
        height: 220px;
        background: #fff;
        transform: perspective(1em) rotateX(0.3deg);
      }
      .finance-scene-content-desc1 {
        position: absolute;
        bottom: 112px;
        left: 0px;
        right: 0px;
        width: 1000px;
        margin: 0px auto;
        height: 220px;
        text-align: center;
        padding: 30px 60px;
        font-size: 20px;
        color: #666;
        line-height: 30px;
      }
    }
  }
}
</style>
